<template>
  <div class="room-detail-container">
    <!-- 房间信息头部 -->
    <div class="room-header">
      <div class="room-info">
        <h2>{{ roomInfo?.name || '加载中...' }}</h2>
        <div class="room-meta">
          <span class="room-status" :class="roomStatusClass">{{ roomStatusText }}</span>
          <span class="player-count">{{ roomInfo?.players.length || 0 }}/{{ roomInfo?.maxPlayers || 0 }} 玩家</span>
          <span v-if="roomInfo?.password" class="room-lock">🔒 私密房间</span>
        </div>
      </div>
      <div class="room-actions">
        <button 
          v-if="canStartGame" 
          @click="startGame" 
          class="btn-primary start-game-btn"
          :disabled="isStartingGame"
        >
          {{ isStartingGame ? '开始中...' : '开始游戏' }}
        </button>
        <button 
          @click="leaveRoom" 
          class="btn-secondary leave-room-btn"
          :disabled="isLeavingRoom"
        >
          {{ isLeavingRoom ? '离开中...' : '离开房间' }}
        </button>
      </div>
    </div>

    <div class="room-content">
      <!-- 左侧聊天区域 -->
      <div class="chat-section">
        <!-- 聊天消息列表 -->
        <div class="chat-messages" ref="chatMessages">
          <div v-if="messages.length === 0" class="no-messages">
            还没有消息，开始聊天吧！
          </div>
          <div 
            v-for="message in messages" 
            :key="message.id" 
            class="message-item" 
            :class="{ 'own-message': message.senderId === currentUserId, 'system-message': message.type === 'system' }"
          >
            <div v-if="message.type !== 'system'" class="message-header">
              <img 
                v-if="message.senderAvatar" 
                :src="message.senderAvatar" 
                alt="Avatar" 
                class="message-avatar"
              >
              <span class="message-sender">{{ message.senderName || '用户' }}</span>
              <span class="message-time">{{ formatMessageTime(message.timestamp || message.createdAt) }}</span>
            </div>
            <div class="message-content">
              {{ message.content }}
            </div>
          </div>
        </div>

        <!-- 消息输入框 -->
        <div class="message-input-area">
          <input 
            v-model="messageInput" 
            type="text" 
            placeholder="输入消息..." 
            class="message-input"
            @keydown.enter="sendMessage"
            :disabled="!isConnected || isSendingMessage"
          >
          <button 
            @click="sendMessage" 
            class="send-message-btn"
            :disabled="!messageInput.trim() || !isConnected || isSendingMessage"
          >
            {{ isSendingMessage ? '发送中...' : '发送' }}
          </button>
        </div>
      </div>

      <!-- 右侧玩家列表 -->
      <div class="players-section">
        <h3>玩家列表</h3>
        <div class="players-list">
          <div 
            v-for="player in roomInfo?.players" 
            :key="player.id" 
            class="player-item" 
            :class="{ 'owner': player.id === roomInfo?.owner.id, 'current-user': player.id === currentUserId }"
          >
            <img v-if="player.avatar" :src="player.avatar" alt="Avatar" class="player-avatar">
            <div class="player-info">
              <div class="player-name">
                {{ player.nickname || player.username }}
                <span v-if="player.id === roomInfo?.owner.id" class="owner-badge">房主</span>
                <span v-if="player.id === currentUserId" class="self-badge">自己</span>
              </div>
              <div class="player-status">在线</div>
            </div>
            <button 
              v-if="canKickPlayer(player.id)" 
              @click="kickPlayer(player.id)"
              class="kick-btn"
              :disabled="isKickingPlayer"
            >
              {{ isKickingPlayer ? '踢出中...' : '踢出' }}
            </button>
          </div>
        </div>

        <!-- 当前游戏信息（如果游戏正在进行） -->
        <div v-if="roomInfo?.status === 'playing'" class="game-info">
          <h3>当前游戏</h3>
          <div class="current-soup">
            <h4>{{ roomInfo?.currentSoup?.title }}</h4>
            <p class="soup-difficulty">难度：{{ roomInfo?.currentSoup?.difficulty }}</p>
            <div class="soup-surface">
              <p>{{ soupSurface }}</p>
            </div>
            <div v-if="showGameControls" class="game-controls">
              <button @click="askQuestion" class="btn-secondary">提问</button>
              <button @click="useHint" class="btn-secondary">提示</button>
              <button @click="guessSoup" class="btn-secondary">猜汤底</button>
            </div>
          </div>
        </div>

        <!-- 连接状态 -->
        <div class="connection-status">
          <div :class="['status-indicator', isConnected ? 'connected' : 'disconnected']"></div>
          <span>{{ isConnected ? '已连接' : '连接中...' }}</span>
        </div>
      </div>
    </div>

    <!-- 游戏相关模态框 -->
    <div v-if="showQuestionModal" class="modal-overlay" @click.self="closeQuestionModal">
      <div class="modal-content">
        <h3>提问</h3>
        <textarea 
          v-model="questionInput" 
          placeholder="输入你的问题..." 
          rows="4"
          :disabled="isSubmitting"
        ></textarea>
        <div class="modal-actions">
          <button @click="closeQuestionModal" class="btn-secondary" :disabled="isSubmitting">取消</button>
          <button @click="submitQuestion" class="btn-primary" :disabled="!questionInput.trim() || isSubmitting">
            {{ isSubmitting ? '提交中...' : '提交' }}
          </button>
        </div>
      </div>
    </div>

    <div v-if="showGuessModal" class="modal-overlay" @click.self="closeGuessModal">
      <div class="modal-content">
        <h3>猜汤底</h3>
        <textarea 
          v-model="guessInput" 
          placeholder="输入你猜测的汤底..." 
          rows="4"
          :disabled="isSubmitting"
        ></textarea>
        <div class="modal-actions">
          <button @click="closeGuessModal" class="btn-secondary" :disabled="isSubmitting">取消</button>
          <button @click="submitGuess" class="btn-primary" :disabled="!guessInput.trim() || isSubmitting">
            {{ isSubmitting ? '提交中...' : '提交' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import userService from '../services/userService';
import chatService from '../services/chatService';
import gameService from '../services/gameService';
import type { GameRoom, ChatMessage, SendMessageRequest, ApiResponse } from '../types';

// 路由和导航
const route = useRoute();
const router = useRouter();
const roomId = route.params.id as string;

// 响应式数据
const roomInfo = ref<GameRoom | null>(null);
const messages = ref<(ChatMessage & { senderName?: string; senderAvatar?: string })[]>([]);
const messageInput = ref('');
const currentUserId = ref('');
const isConnected = ref(false);
const isSendingMessage = ref(false);
const isStartingGame = ref(false);
const isLeavingRoom = ref(false);
const isKickingPlayer = ref(false);
const soupSurface = ref('');
const showGameControls = ref(false);
const chatMessagesRef = ref<HTMLElement>();

// 游戏模态框相关
const showQuestionModal = ref(false);
const questionInput = ref('');
const showGuessModal = ref(false);
const guessInput = ref('');
const isSubmitting = ref(false);

// 计算属性
const roomStatusClass = computed(() => {
  switch (roomInfo.value?.status) {
    case 'waiting': return 'status-waiting';
    case 'playing': return 'status-playing';
    case 'closed': return 'status-closed';
    default: return '';
  }
});

const roomStatusText = computed(() => {
  switch (roomInfo.value?.status) {
    case 'waiting': return '等待中';
    case 'playing': return '游戏中';
    case 'closed': return '已关闭';
    default: return '未知状态';
  }
});

const canStartGame = computed(() => {
  return roomInfo.value?.status === 'waiting' && 
         roomInfo.value?.owner.id === currentUserId.value && 
         roomInfo.value?.players.length > 0;
});

const canKickPlayer = (playerId: string) => {
  return roomInfo.value?.owner.id === currentUserId.value && 
         playerId !== currentUserId.value && 
         playerId !== roomInfo.value?.owner.id;
};

// 方法
const formatMessageTime = (date: Date) => {
  if (!date) return '';
  const d = new Date(date);
  const hours = d.getHours().toString().padStart(2, '0');
  const minutes = d.getMinutes().toString().padStart(2, '0');
  return `${hours}:${minutes}`;
};

const loadRoomInfo = async () => {
  try {
    const response = await gameService.getGameRoom(roomId);
    if (response.success) {
      roomInfo.value = response.data;
      
      // 如果游戏正在进行，加载汤面
      if (roomInfo.value.status === 'playing' && roomInfo.value.currentSoup) {
        const soupResponse = await gameService.getSoupById(roomInfo.value.currentSoup.id);
        if (soupResponse.success) {
          soupSurface.value = soupResponse.data.surface;
          showGameControls.value = true;
        }
      }
    } else {
      console.error('加载房间信息失败:', response.error);
      router.push('/rooms');
    }
  } catch (error) {
    console.error('加载房间信息时发生错误:', error);
    router.push('/rooms');
  }
};

const loadMessages = async () => {
  try {
    const response = await chatService.getRoomMessages(roomId, 50);
    // 这里应该处理响应，将消息添加到messages数组中
    // messages.value = response.map(msg => ({ ...msg, senderName: getSenderName(msg.senderId) }));
    scrollToBottom();
  } catch (error) {
    console.error('加载消息失败:', error);
  }
};

const getSenderName = (userId: string) => {
  if (!roomInfo.value) return '未知用户';
  const player = roomInfo.value.players.find(p => p.id === userId);
  return player ? (player.nickname || player.username) : '未知用户';
};

const getSenderAvatar = (userId: string) => {
  if (!roomInfo.value) return '';
  const player = roomInfo.value.players.find(p => p.id === userId);
  return player ? player.avatar || '' : '';
};

const sendMessage = async () => {
  if (!messageInput.value.trim() || !isConnected.value) return;
  
  isSendingMessage.value = true;
  try {
    // 使用WebSocket发送消息
    const messageData: SendMessageRequest = {
      roomId,
      content: messageInput.value.trim(),
      type: 'text'
    };
    
    await chatService.sendWsMessage(messageData);
    
    // 清空输入框
    messageInput.value = '';
  } catch (error) {
    console.error('发送消息失败:', error);
    // 降级使用API发送
    try {
      await chatService.sendRoomMessage(roomId, messageInput.value.trim());
      messageInput.value = '';
    } catch (apiError) {
      console.error('使用API发送消息也失败了:', apiError);
    }
  } finally {
    isSendingMessage.value = false;
  }
};

const startGame = async () => {
  if (!canStartGame.value) return;
  
  isStartingGame.value = true;
  try {
    const response = await gameService.startGame(roomId);
    if (response.success) {
      // 游戏开始成功，刷新房间信息
      await loadRoomInfo();
    } else {
      console.error('开始游戏失败:', response.error);
      // 显示错误提示
      alert('开始游戏失败: ' + (response.error || '未知错误'));
    }
  } catch (error) {
    console.error('开始游戏时发生错误:', error);
    alert('开始游戏时发生错误');
  } finally {
    isStartingGame.value = false;
  }
};

const leaveRoom = async () => {
  isLeavingRoom.value = true;
  try {
    // 断开WebSocket连接
    chatService.disconnect();
    
    // 调用API离开房间
    await chatService.leaveRoom(roomId);
    
    // 导航回房间列表页
    router.push('/rooms');
  } catch (error) {
    console.error('离开房间时发生错误:', error);
    // 即使出错也导航回房间列表页
    router.push('/rooms');
  } finally {
    isLeavingRoom.value = false;
  }
};

const kickPlayer = async (playerId: string) => {
  if (!canKickPlayer(playerId)) return;
  
  if (!confirm('确定要踢出该玩家吗？')) return;
  
  isKickingPlayer.value = true;
  try {
    await chatService.kickMember(roomId, playerId);
    // 刷新房间信息
    await loadRoomInfo();
  } catch (error) {
    console.error('踢出玩家失败:', error);
    alert('踢出玩家失败');
  } finally {
    isKickingPlayer.value = false;
  }
};

const askQuestion = () => {
  showQuestionModal.value = true;
  questionInput.value = '';
};

const closeQuestionModal = () => {
  if (!isSubmitting.value) {
    showQuestionModal.value = false;
    questionInput.value = '';
  }
};

const submitQuestion = async () => {
  if (!questionInput.value.trim() || isSubmitting.value) return;
  
  isSubmitting.value = true;
  try {
    const response = await gameService.askQuestion({
      soupId: roomInfo.value?.currentSoup?.id || '',
      question: questionInput.value.trim()
    });
    
    if (response.success) {
      // 添加问题和回答到聊天记录
      messages.value.push({
        id: `msg_${Date.now()}_question`,
        roomId,
        senderId: currentUserId.value,
        content: questionInput.value.trim(),
        type: 'text',
        createdAt: new Date(),
        senderName: getSenderName(currentUserId.value),
        senderAvatar: getSenderAvatar(currentUserId.value)
      });
      
      // 模拟AI回答
      setTimeout(() => {
        messages.value.push({
          id: `msg_${Date.now()}_answer`,
          roomId,
          senderId: 'system',
          content: response.data.answer || '这是一个好问题，但我不能告诉你答案。继续提问吧！',
          type: 'system',
          createdAt: new Date(),
          senderName: 'AI'
        });
        scrollToBottom();
      }, 500);
      
      closeQuestionModal();
    } else {
      console.error('提问失败:', response.error);
      alert('提问失败: ' + (response.error || '未知错误'));
    }
  } catch (error) {
    console.error('提问时发生错误:', error);
    alert('提问时发生错误');
  } finally {
    isSubmitting.value = false;
  }
};

const guessSoup = () => {
  showGuessModal.value = true;
  guessInput.value = '';
};

const closeGuessModal = () => {
  if (!isSubmitting.value) {
    showGuessModal.value = false;
    guessInput.value = '';
  }
};

const submitGuess = async () => {
  if (!guessInput.value.trim() || isSubmitting.value) return;
  
  isSubmitting.value = true;
  try {
    const response = await gameService.guessSoup({
      soupId: roomInfo.value?.currentSoup?.id || '',
      guess: guessInput.value.trim()
    });
    
    if (response.success) {
      // 添加猜测和结果到聊天记录
      messages.value.push({
        id: `msg_${Date.now()}_guess`,
        roomId,
        senderId: currentUserId.value,
        content: guessInput.value.trim(),
        type: 'text',
        createdAt: new Date(),
        senderName: getSenderName(currentUserId.value),
        senderAvatar: getSenderAvatar(currentUserId.value)
      });
      
      messages.value.push({
        id: `msg_${Date.now()}_guess_result`,
        roomId,
        senderId: 'system',
        content: response.data.result || '你的猜测不正确。继续尝试！',
        type: 'system',
        createdAt: new Date(),
        senderName: 'AI'
      });
      
      scrollToBottom();
      
      // 如果猜测正确，可能需要刷新房间状态
      if (response.data.isCorrect) {
        setTimeout(() => loadRoomInfo(), 1000);
      }
      
      closeGuessModal();
    } else {
      console.error('猜汤底失败:', response.error);
      alert('猜汤底失败: ' + (response.error || '未知错误'));
    }
  } catch (error) {
    console.error('猜汤底时发生错误:', error);
    alert('猜汤底时发生错误');
  } finally {
    isSubmitting.value = false;
  }
};

const useHint = async () => {
  try {
    const response = await gameService.useHint(roomInfo.value?.currentSoup?.id || '');
    
    if (response.success) {
      // 添加提示到聊天记录
      messages.value.push({
        id: `msg_${Date.now()}_hint`,
        roomId,
        senderId: 'system',
        content: `提示: ${response.data.hint || '暂无提示'}`,
        type: 'system',
        createdAt: new Date(),
        senderName: 'AI'
      });
      
      scrollToBottom();
    } else {
      console.error('使用提示失败:', response.error);
      alert('使用提示失败: ' + (response.error || '未知错误'));
    }
  } catch (error) {
    console.error('使用提示时发生错误:', error);
    alert('使用提示时发生错误');
  }
};

const scrollToBottom = async () => {
  await nextTick();
  if (chatMessagesRef.value) {
    chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight;
  }
};

const connectWebSocket = async () => {
  try {
    const userInfo = userService.getUserInfo();
    if (userInfo) {
      currentUserId.value = userInfo.id;
      // 使用用户token连接WebSocket
      const token = localStorage.getItem('token') || '';
      await chatService.connect(token);
      
      // 加入房间
      await chatService.joinWsRoom(roomId);
    }
  } catch (error) {
    console.error('WebSocket连接失败:', error);
  }
};

// 事件监听器
let removeRoomMessageListener: (() => void) | null = null;
let removeRoomEventListener: (() => void) | null = null;
let removeConnectionListener: (() => void) | null = null;

// 生命周期钩子
onMounted(async () => {
  // 加载用户信息
  const userInfo = userService.getUserInfo();
  if (!userInfo) {
    router.push('/login');
    return;
  }
  currentUserId.value = userInfo.id;
  
  // 加载房间信息和消息
  await loadRoomInfo();
  await loadMessages();
  
  // 连接WebSocket
  await connectWebSocket();
  
  // 监听房间消息
  removeRoomMessageListener = chatService.onRoomMessage(roomId, (message: any) => {
    messages.value.push({
      ...message,
      senderName: message.senderName || getSenderName(message.senderId),
      senderAvatar: getSenderAvatar(message.senderId)
    });
    scrollToBottom();
  });
  
  // 监听房间事件
  removeRoomEventListener = chatService.onRoomEvent(roomId, async (event: any) => {
    console.log('房间事件:', event);
    // 刷新房间信息
    await loadRoomInfo();
  });
  
  // 监听连接状态变化
  removeConnectionListener = chatService.onConnectionStatusChange((connected: boolean) => {
    isConnected.value = connected;
  });
});

onUnmounted(() => {
  // 清理事件监听器
  if (removeRoomMessageListener) removeRoomMessageListener();
  if (removeRoomEventListener) removeRoomEventListener();
  if (removeConnectionListener) removeConnectionListener();
  
  // 断开WebSocket连接
  chatService.disconnect();
});

// 监听路由变化
watch(() => route.params.id, async (newId) => {
  if (newId && newId !== roomId) {
    // 路由变化，清理旧的监听器
    if (removeRoomMessageListener) removeRoomMessageListener();
    if (removeRoomEventListener) removeRoomEventListener();
    
    // 离开旧房间并加入新房间
    if (isConnected.value) {
      try {
        await chatService.leaveWsRoom(roomId);
      } catch (error) {
        console.error('离开旧房间失败:', error);
      }
    }
    
    // 重新加载数据和连接
    await loadRoomInfo();
    await loadMessages();
    
    if (isConnected.value) {
      try {
        await chatService.joinWsRoom(newId as string);
      } catch (error) {
        console.error('加入新房间失败:', error);
      }
    }
    
    // 重新设置监听器
    removeRoomMessageListener = chatService.onRoomMessage(newId as string, (message: any) => {
      messages.value.push({
        ...message,
        senderName: message.senderName || getSenderName(message.senderId),
        senderAvatar: getSenderAvatar(message.senderId)
      });
      scrollToBottom();
    });
    
    removeRoomEventListener = chatService.onRoomEvent(newId as string, async (event: any) => {
      console.log('房间事件:', event);
      await loadRoomInfo();
    });
  }
});
</script>

<style scoped>
.room-detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.room-header {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-info h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
  color: #333;
}

.room-meta {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #666;
}

.room-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.status-waiting {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-playing {
  background-color: #e8f5e9;
  color: #388e3c;
}

.status-closed {
  background-color: #ffebee;
  color: #d32f2f;
}

.room-actions {
  display: flex;
  gap: 10px;
}

.btn-primary, .btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #1976d2;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #1565c0;
}

.btn-secondary {
  background-color: #757575;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #616161;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.room-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.no-messages {
  text-align: center;
  color: #999;
  padding: 40px 20px;
}

.message-item {
  margin-bottom: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}

.message-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.message-sender {
  font-weight: 500;
  color: #333;
}

.message-time {
  color: #999;
}

.message-content {
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #f5f5f5;
  max-width: 70%;
  word-wrap: break-word;
}

.own-message .message-content {
  background-color: #1976d2;
  color: white;
  margin-left: auto;
}

.system-message .message-content {
  background-color: #e8f5e9;
  color: #388e3c;
  font-style: italic;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

.message-input-area {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 10px;
}

.message-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.message-input:focus {
  outline: none;
  border-color: #1976d2;
}

.send-message-btn {
  padding: 10px 20px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.send-message-btn:hover:not(:disabled) {
  background-color: #1565c0;
}

.players-section {
  width: 300px;
  background-color: #fff;
  margin: 20px 20px 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.players-section h3 {
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 18px;
  color: #333;
}

.players-list {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.player-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.player-item:hover {
  background-color: #f5f5f5;
}

.player-item.owner {
  background-color: #e3f2fd;
}

.player-item.current-user {
  background-color: #e8f5e9;
}

.player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.player-info {
  flex: 1;
}

.player-name {
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
}

.owner-badge {
  background-color: #1976d2;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
}

.self-badge {
  background-color: #388e3c;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
}

.player-status {
  font-size: 12px;
  color: #999;
}

.kick-btn {
  padding: 5px 10px;
  background-color: #d32f2f;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.kick-btn:hover:not(:disabled) {
  background-color: #c62828;
}

.game-info {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
}

.current-soup h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.soup-difficulty {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.soup-surface {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.soup-surface p {
  margin: 0;
  line-height: 1.5;
}

.game-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.connection-status {
  padding: 15px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.connected {
  background-color: #388e3c;
}

.status-indicator.disconnected {
  background-color: #d32f2f;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 500px;
}

.modal-content h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.modal-content textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.modal-content textarea:focus {
  outline: none;
  border-color: #1976d2;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .room-content {
    flex-direction: column;
  }
  
  .players-section {
    width: auto;
    margin: 0 20px 20px 20px;
  }
  
  .room-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .room-meta {
    justify-content: center;
  }
}
</style>